<template>
  <view>
    <view class="home flex column" v-if="!recordShow">
      <u-navbar
        :title-bold="true"
        :title="title"
        back-icon-color="#fff"
        :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
        title-color="#fff"
      >
      </u-navbar>
      <view class="list-tit">
        <view class="times">{{ `${item.beginTime} 至 ${item.endTime}` }}</view>
        <view
          class="video-card u-flex u-row-center u-col-center"
          :style="wb ? 'background: transparent;' : 'background: #000;'"
        >
        </view>
      </view>
    </view>
    <recordTim :recordShow.sync="recordShow" @search="search" />
  </view>
</template>
<script>
import recordTim from "./recordTim.vue";
export default {
  components: { recordTim },
  data() {
    return {
      title: "",
      item: {},
      wb: null,
      recordShow: true, // 查看录像时间筛选弹窗判断
    };
  },
  onLoad(options) {
    this.item = JSON.parse(options.item);
  },
  destroyed() {
    this.wb?.close();
  },
  methods: {
    search(val) {
      this.item = Object.assign(this.item, JSON.parse(val));
      this.title = this.item.cameraName;
      this.playVideo(this.item);

      // video-card
      var pages = getCurrentPages();

      var page = pages[pages.length - 1];

      // #ifdef APP-PLUS

      var currentWebview = page.$getAppWebview();

      this.wb = plus.webview.create("/hybrid/html/index.html", "", {
        width: "94%",
        left: "3%",
        height: "200px",
        top: "130px",
      });

      currentWebview.append(this.wb);

      // #endif
    },
    /**
     * 切换视频
     */
    async playVideo(item) {
      const { wsUrl } = await this.getFlvUrl("/monitor/camera/pull/getHttpFlvUrl", item);
      this.wb.evalJS(`getUrlAndPlay('${wsUrl}')`)
    },
    // 获取回放
    getFlvUrl (url, camera) {
      return new Promise(async (resolve, reject) => {
        const res = await this.$get(`${url}?cameraUuid=${camera.cameraUuid || camera.deviceNo}&customerNo=${camera.customerNo}&localCameraType=${camera.localCameraType}&beginTime=${camera.beginTime}&endTime=${camera.endTime}`)
        resolve(res.body)
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;

  .list-tit {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    background: #fff;
    color: #4b4b4b;

    .times {
      padding: 28rpx 44rpx;
    }

    .video-card {
      margin-top: 20rpx;
      height: 400rpx;
    }
  }
}
</style>
